<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <!-- <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="axios.min.js"></script>
    <script src="bscroll.min.js"></script>
    <script src="vue.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="border.css">
</head>

<body>
    <div id="app">
        <div class="content">
          请选择地区:  <input type="text" v-model="InputValue" readonly @click="IsShowClick" class="input-search">
            <transition name="slide-fade">
                <div class="showDetails" v-if="IsShow">
                    <div class="header-detail">
                        <button class="btn  btn-cancel" @click="Cancel">取消</button>
                        <button class="btn  btn-sure" @click="Sure">确定</button>
                    </div>
                    <ul class="provinces">
                        <li v-for="(provinces,index) of ProvinceList" @click="NextCities(provinces,index)">{{provinces.areaName}}</li>
                    </ul>
                    <ul class="cities">
                        <li v-for="(city,index) of CitiesList" @click="NextAreas(city,index)">{{city.areaName}}</li>
                    </ul>
                    <ul class="areas">
                        <li v-for="(area,index) of areasList" @click="GetArea(area,index)">{{area.areaName}}</li>
                    </ul>

                </div>
            </transition>

        </div>
    </div>
    <script>
        let provinces = "江苏";
        let city = "南京市";
        let area = "雨花台区";

        let pindex;
        let cindex;
        let aindex;

        var vm = new Vue({
            el: '#app',
            data: {
                IsShow: false,
                ProvinceList: [],
                CitiesList: [],
                areasList: [],
                InputValue: provinces + '-' + city + '-' + area
            },
            mounted: () => {
                axios.get('city.json')
                    .then((result) => {
                        vm.ProvinceList = result.data.data.info;
                        vm.CitiesList = vm.ProvinceList[0].cities
                        this.provinces = provinces.areaName;
                        vm.areasList = vm.CitiesList[0].counties
                        this.city = city.areaName;
                    }).catch((err) => {
                        alert(err)
                    });
            },
            methods: {
                IsShowClick: () => {
                    vm.IsShow = !vm.IsShow
                },
                NextCities: (provinces, index) => {
                    this.pindex = index;
                    vm.CitiesList = vm.ProvinceList[index].cities
                    this.provinces = provinces.areaName;
                    vm.areasList = []
                },
                NextAreas: (city, index) => {
                    this.cindex = index;
                    vm.areasList = vm.CitiesList[index].counties
                    this.city = city.areaName;
                    console.log(this.city)
                },
                GetArea: (area, index) => {
                    this.aindex = index;
                    this.area = area.areaName;
                    console.log(this.area)
                },
                Cancel: () => {
                    vm.IsShow = false;
                },
                Sure: () => {
                    if (this.pindex === undefined || this.cindex === undefined || this.aindex === undefined) {
                        vm.IsShow = false;
                    }
                    else {
                        console.log(this.provinces + '-' + this.city + '-' + this.area)
                        vm.InputValue = this.provinces + '-' + this.city + '-' + this.area
                    }
                    vm.IsShow = false;
                }
            }
        })
    </script>
</body>

</html>